<template>
  <view class="container">
    <view class="hero">
      <view class="hero-title">党建知识学习</view>
      <view class="hero-desc">掌握政策理论，凝聚发展力量</view>
    </view>

    <view class="card" v-for="item in studyList" :key="item.id">
      <view class="card-header">
        <image
          v-if="item.coverImageFull"
          :src="item.coverImageFull"
          mode="aspectFill"
          class="card-cover"
        />
        <view class="card-title-group">
          <view class="card-title">{{ item.title }}</view>
          <view class="card-content">{{ item.description || '暂无简介' }}</view>
        </view>
      </view>
      <view class="card-footer">
        <view class="publish-time" v-if="item.publishTime">发布时间：{{ item.publishTime }}</view>
        <button class="card-btn" @click="openResource(item)">查看资料</button>
      </view>
    </view>

    <view class="empty-state" v-if="!loading && studyList.length === 0">
      <view class="empty-title">暂无学习资料</view>
      <view class="empty-desc">请联系管理员在后台发布党建学习内容</view>
    </view>

    <view class="tips">
      <view class="tips-title">温馨提示</view>
      <view class="tips-item">· 资料内容将由后台统一配置和更新</view>
      <view class="tips-item">· 如需补充新的学习内容，请联系党建管理员</view>
    </view>
  </view>
</template>

<script>
import { partyStudyApi, utils } from '@/utils/api-simple.js'

export default {
  data() {
    return {
      loading: false,
      studyList: []
    }
  },
  onLoad() {
    this.fetchStudyList()
  },
  onShow() {
    // 作为 tab 页展示时，切换回来自动刷新
    this.fetchStudyList()
  },
  onPullDownRefresh() {
    this.fetchStudyList()
  },
  methods: {
    async fetchStudyList() {
      this.loading = true
      try {
        const response = await partyStudyApi.getPublicStudyList()
        if (response?.code === 200) {
          this.studyList = (response.data || []).map(item => ({
            ...item,
            coverImageFull: utils.getImageUrl(item.coverImage),
            fileUrlFull: utils.getImageUrl(item.fileUrl)
          }))
        } else {
          this.studyList = []
        }
      } catch (error) {
        console.error('获取党建学习资料失败', error)
        this.studyList = []
        uni.showToast({
          title: '获取学习资料失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
        uni.stopPullDownRefresh()
      }
    },
    async openResource(item) {
      if (!item.fileUrlFull) {
        uni.showToast({
          title: '资料正在整理中',
          icon: 'none'
        })
        return
      }

      const fileUrl = item.fileUrlFull
      const ext = this.getFileExtension(fileUrl)
      const docExts = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx']

      if (docExts.includes(ext)) {
        try {
          uni.showLoading({ title: '打开资料...' })
          const [error, res] = await uni.downloadFile({ url: fileUrl })
          uni.hideLoading()
          if (!error && res?.statusCode === 200) {
            const tempPath = res.tempFilePath
            uni.openDocument({
              filePath: tempPath,
              showMenu: true,
              fail: () => {
                this.openInWebview(fileUrl)
              }
            })
          } else {
            this.openInWebview(fileUrl)
          }
        } catch (error) {
          console.warn('打开文档失败，使用WebView', error)
          uni.hideLoading()
          this.openInWebview(fileUrl)
        }
      } else {
        this.openInWebview(fileUrl)
      }
    },
    openInWebview(url) {
      uni.navigateTo({
        url: `/pages/webview/webview?url=${encodeURIComponent(url)}`
      })
    },
    getFileExtension(url) {
      if (!url) return ''
      const cleanUrl = url.split('?')[0]
      return cleanUrl.substring(cleanUrl.lastIndexOf('.') + 1).toLowerCase()
    }
  }
}
</script>

<style scoped>
.container {
  padding: 24rpx;
  background-color: #f6f7fb;
  min-height: 100vh;
  box-sizing: border-box;
}

.hero {
  background: linear-gradient(135deg, #f44336, #e53935);
  color: #fff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 12rpx 30rpx rgba(244, 67, 54, 0.25);
  margin-bottom: 24rpx;
}

.hero-title {
  font-size: 40rpx;
  font-weight: bold;
}

.hero-desc {
  margin-top: 12rpx;
  font-size: 28rpx;
  opacity: 0.9;
}

.card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 28rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 8rpx 22rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.card-cover {
  width: 140rpx;
  height: 140rpx;
  border-radius: 16rpx;
  margin-right: 24rpx;
  background-color: #fbe9e7;
}

.card-title-group {
  flex: 1;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.card-content {
  color: #666;
  font-size: 26rpx;
  line-height: 1.6;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16rpx;
}

.publish-time {
  font-size: 24rpx;
  color: #999;
}

.card-btn {
  width: 200rpx;
  border-radius: 12rpx;
  background-color: #f44336;
  color: #fff;
  font-size: 28rpx;
}

.empty-state {
  margin-top: 60rpx;
  text-align: center;
  color: #999;
}

.empty-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 12rpx;
}

.empty-desc {
  font-size: 26rpx;
}

.tips {
  margin-top: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 28rpx;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.04);
}

.tips-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 12rpx;
}

.tips-item {
  color: #666;
  font-size: 26rpx;
  line-height: 1.6;
}
</style>

